<template>
		<view class="non-urgent-service">
			<!-- 订单信息 -->
			<view v-if="isOrder==0">
				<view class="order-info">
					<u-form :model="form" ref="uForm"  >
						<u-form-item label="车型:" prop="carModel">
							<u-input v-model="form.carModel" placeholder="请输入您的车型" />
						</u-form-item>
						
						<u-form-item label="邮箱:" prop="email">
							<u-input v-model="form.email" placeholder="请输入您的邮箱" />
						</u-form-item>
						
						<u-form-item label="电话:" prop="phone">
							<u-input v-model="form.phone" placeholder="请输入您的电话" />
						</u-form-item>
						
						<u-form-item label="问题描述:" prop="problem" labelPosition='top' label-width="140rpx">
							<u-textarea v-model="form.problem" placeholder="请详细描述您的问题" style="margin-top: 20rpx;margin-left: 80rpx;"></u-textarea>
						</u-form-item>
						
						<u-form-item label="图片上传:" prop="images" labelPosition='top' label-width="140rpx">
							<u-upload
							style="margin-top: 20rpx;margin-left: 80rpx;"
								ref="uUpload"
								:action="uploadUrl"
								:file-list="fileList"
								max-count="3"
								:auto-upload="false"
							></u-upload>
						</u-form-item>
					</u-form>
				</view>
				
				<!-- 操作按钮 -->
				<view class="action-buttons">
					<button class="btn cancel" @click="resetForm">取消</button>
					<button class="btn confirm" @click="confirmOrder">确认</button>
				</view>
			</view>
			<view v-if="isOrder==1">
			</view>
		</view>
			
		</view>
</template>
<script>
export default {
  data() {
    return {
			selectedValue:'选项1',
			options: ['选项1', '选项2', '选项3'],
			show: false,
			columns: [
					['中国', '美国', '日本']
			],
			isOrder:0,
			form: {
				carModel: '',
				email: '',
				phone: '',
				problem: ''
			},
			rules: {
				carModel: [
					{ required: true, message: '请输入车型', trigger: 'blur' }
				],
				email: [
					{ required: true, message: '请输入邮箱', trigger: 'blur' },
					{ type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
				],
				phone: [
					{ required: true, message: '请输入电话', trigger: 'blur' },
					{ 
						validator: (rule, value, callback) => {
							return /^1[3-9]\d{9}$/.test(value);
						},
						message: '手机号码格式不正确',
						trigger: 'blur'
					}
				],
				problem: [
					{ required: true, message: '请输入问题描述', trigger: 'blur' },
					{ min: 10, message: '问题描述不能少于10个字', trigger: 'blur' }
				]
			},
			uploadUrl: 'https://your-upload-api.com/upload', // 替换为实际的上传接口
			fileList: [],
			userInfo: {
				name: '',
				isMember: false
			},
			shopName: "xxxxxxx店", // 店铺名称
			problemDescription: "xxxxxxxxxxxxxx", // 问题描述
			images: [
				"https://uviewui.com/album/1.jpg",
				"https://uviewui.com/album/1.jpg",
				"https://uviewui.com/album/1.jpg",
				"https://uviewui.com/album/1.jpg",
			], // 上传的图片
			contactInfo: "" ,// 联系方式
			value:"66",
		};
  },
	onLoad() {
		// 从缓存加载用户信息
		this.loadUserInfo();
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	mounted() {
	},
  methods: {
		cancelOrder(){
			this.isOrder=true
		},
		confirmOrder(){
			
		},
		orderClick(){
			uni.navigateTo({
				// url: `/pages/order/detail?orderId=${orderId}`
				url: `/pages/order/detail/index`
			})
		},
		 // 加载用户数据
		loadUserInfo() {
			const info = uni.getStorageSync('userInfo') || {};
			this.userInfo = {
				name: info.name || '新',
				isMember: info.membership === 'vip' // 根据实际字段调整
			};
		},
	
    contactService(service) {
      console.log('联系商家：', service.name);
      uni.makePhoneCall({
        phoneNumber: '123456789', // 示例电话号码
      });
    },
    navigateTo(page) {
      console.log('跳转到：', page);
      uni.navigateTo({
        url: `/pages/tabbar/${page}/${page}`, // 示例路径
      });
    },
    submitForm() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          const formData = {
            ...this.form,
            images: this.$refs.uUpload.lists.filter(item => item.progress === 100).map(item => item.response ? item.response.url : item.url)
          };
          console.log('提交数据:', formData);
					
          //调接口
					
        } else {
          console.log('验证失败');
        }
      });
    },
    resetForm() {
      this.$refs.uForm.resetFields();
      // this.$refs.uUpload.clear();
    }
	
  },
};
</script>
<style scoped lang="scss">
/deep/ .u-form-item__body__left__content__label{
	color: #666!important;
}
.map-container {
	height: 200px;
	background-color: #eaeaea;
}
.order-info {
	background-color: white;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-top: 20rpx;
	font-size: 30rpx;
	.section-title {
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}
	.shop-name {
		font-size: 30rpx;
		color: #666;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.problem-description {
		margin-bottom: 30rpx;
	}
	.label {
		font-size: 28rpx;
		color: #666;
		margin-right: 10rpx;
	}
	
	.description {
		font-size: 28rpx;
		color: #333;
	}
	
	.upload-section {
		margin-bottom: 30rpx;
	}
	
	.image-preview {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		.preview-image {
			width: 190rpx;
			height: 190rpx;
			margin-right: 15rpx;
			margin-bottom: 15rpx;
			border-radius: 8rpx;
			.u-image{
				width:100%;
			}
		}
	}
}
.action-buttons {
	  display: flex;
	  justify-content: right;
	  margin-top: 40rpx;
		.btn {
		  margin: 0 15rpx;
		  border-radius: 50rpx;
		  font-size: 14px;
			padding: 0 20px;
		}
		.cancel {
		  background-color: #f8f8f8;
		  color: #666;
		  border: 1rpx solid #ddd;
		}
		.confirm {
		  color: var(--primary-color);
			border: 1px solid var(--primary-color);
		}
	}
.service-list {
  padding: 1rem;
	.service-title {
		display: flex;
		justify-content: start;
		align-items: center;
	  font-size: 0.9rem;
	  color: var(--text-color-b);
		.u-slider{
			width: 130px;
		}
	}
	.item-box{
		height:45vh;
		overflow: auto;
	}
	.service-item {
		
	  padding: 1rem 0;
	  margin-bottom: 0.8rem;
	  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}
	.service-info {
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 10px;
		.service-name {
			font-size: 1rem;
			color: var(--text-color-b);
		}
		.service-type {
		  font-size: 0.6rem;
			color: #fff;
			padding:2px 5px ;
			margin-left: 10px;
			border-radius: 10px;
			background-color:var(--primary-color) ;
		}
		.service-star{
			color: var(--primary-color);
			font-size: 14px;
			margin-right: 2px;
		}
		.service-mark{
			margin-left: 10px;
			font-size: 0.8rem;
			color: var(--primary-color);
		}
	}
	.price-box{
		color:  var(--text-color-g);
		display: flex;
		justify-content:space-between;
		padding: 2px;
		margin-bottom: 6px;
		font-size: 0.9rem;
		color: var(--text-color-g);
		.service-price{
			display: flex;
			justify-content: start;
		}
	}
	.service-actions {
	  display: flex;
	  justify-content: space-between;
	}
	.phoneClass{
		color: var(--text-color-g);
		font-size: 0.9rem;
		display: flex;
		align-items: center;
	}
	.service-actions>view{
		display: flex;
		justify-content: center;
	}
	.service-actions .tagList{
		margin-top: 5px;
	}
	.service-actions .tagList .tagItem{
		margin-right: 5px;
	}
}
</style>
